Uvod

Cilj ovih materijala je prikazati kako uz pomoć naših elemenata možemo oživjeti moodle stranicu koristeći JavaScript animacije. One nam služe da istaknemo neki sadržaj, zaokupimo pažnju korisnika, usmjerimo na neki dio i slično. Vrlo je važno da pokušate upotrebljavati animacije samo u onim situacijama kada će korisnik od njih imati koristi, nije poželjno pretjerano korištenje animacija koje nemaju nikakvu svrhu.

Za potrebe ovog dokumenta koristiti ćemo se s animacijama ugrađenih pomoću YUI3 koje su uključene u standardnu moodle instalaciju. YUI (Yahoo User Interface) je jedna od vodećih knjižnica na internetu u upotrebi. Postoji puno zadataka koje treba obaviti tijekom pisanja JavaScript koda. Veliki dio tih zadataka je bavljenje razlikama među web preglednicima. U potrebi za načinima da se sakriju različitosti za svaki preglednik nastale su knjižnice koje okupljaju komplete alata za ove potrebe, poznatije kao JavaScript knjižnice.

Osnova svih animacija je promjena vrijednosti atributa nekog elementa iz jedne vrijednosti u drugu, za određeno vremensko razdoblje. Npr. ukoliko želimo koristiti animaciju fade-in za neki element, promijeniti ćemo prozirnost elementa iz 0% u 100%, ili u slučaju promjene položaja elemenata mijenjati ćemo X i Y koordinate.

Izrada animacija za LMS

U nastavku ćemo izraditi primjere od pet različitih animacija. Za početak potrebno je stvoriti novi poddirektorij pod nazivom animation unutar direktorija moodle u koji ćemo pohraniti naše animacije.

Slika 1. Putanja do novog direktorija s animacijama

Fade in

U ovom primjeru ćemo napraviti fade-in efekt tako što ćemo pomoću animiranja elementa promijeniti njegovu neprozirnost od 0% do 100%. Na taj način nevidljivi element postaje vidljiv, ili se prikazuje neprikazani.

To ćemo učiniti na sljedeći način:

Za početak izrađujemo anim_fadein.php dokument i pohranjujemo ga u naš novi direktorij koji smo nazvali animation.

Slika 2. Prikaz anim_fadein.php dokumenta

Unutar php datoteke stvorili smo element na koji želimo primijeniti fade-in animaciju. Uz CSS svojstva kojima smo oblikovali izgled elementa, namjestili smo i njegovu prozirnost (opacity) na 0%, što znači da će element biti nevidljiv prilikom učitavanja stranice.

Zatim je potrebno stvoriti još jedan dokument pod nazivom anim_fadein.js koji će sadržavati JavaScript kod za izvršavanje animacije.

Slika 3. Prikaz anim_fadein.js dokumenta

Stvaranjem nove YUI instance učitavamo dva modula node i anim. Node modul nam omogućava pristup da priložimo događaje na našu stranicu, a anim modul nam pruža pristup YUI3 mogućnostima animacija. Nakon što smo učitali potrebne module izrađujemo novu instancu anim modula koji prolazi nekoliko parametara. Node parametar je ID elementa koji želimo animirati. Definiramo konačne vrijednosti koje želimo da se prikažu na stranici nakon što se izvrši animacija. U ovom primjeru postavili smo da prozirnost na 1, što predstavlja 100%. Za kraj se pretplaćujemo na contentready događaj elementa na kojemu će se izvršiti animacija. To osigurava da će se element biti učitan u potpunosti i da će biti dostupan i prije nego što se priložen kod učita. Kod koji prilažemo jednostavno poziva metodu koja animira objekt koji smo kreirali ranije u kodu. Kada se element koji smo odabrali za animaciju učita na stranici, contentready događaj se pokreće i izvodi se transformacija koju smo definirali ranije. Mijenjamo prozirnost iz 0% u 100% u jednoj sekundi. Vrijeme koje je potrebno za izvršavanje animacije nismo posebno postavljali stoga se izvršava zadano u jednoj sekundi.

Na sljedećim fotografiama vidimo kako animacija izgleda u pregledniku.

Slika 4. Animacija Fade in u pregledniku

Slika 5. Animacija Fade in u pregledniku

Fade out

U ovom primjeru napraviti ćemo Fade out animaciju koja, za razliku od prošlog primjera, mijenja neprozirnost elementa od 100% do 0%. Tako će naš element u početku biti nevidljiv i zatim pomoću CSS svojstva povećati svoju vidljivost i prikazati skrivene elemente.

Ponovno započinjemo sa stvaranjem php dokumenta, naziva anim_fadeout.php. Svi elementi su zadani na 100% vidljivosti, stoga ovoga puta nismo morali dodavati CSS svojstva kojima bi odredili vidljivost.

Slika 6. Prikaz anim_fadeout.php dokumenta

Isto tako, ponovno stvaramo JS dokument anim_fadeout.js dokument. Pomoću njega ćemo promijeniti neprozirnost s 100% do 0% (od 1 do 0). Ponovno smo započeli sa stvaranjem nove YUI3 instance i učitali dva modula: node i anim. Node nam omogućava pristupu događajima na našoj stranici, a anim modul pruža pristup sposobnostima animacija. Nakon učitavanja potrebnih modula stvaramo novu instancu anim modula koja prolazi u nekoliko parametara. Parametar node je ID elementa koji želimo animirati, a unutar njega se nalaze atributi koje želimo da se primjene na element kada se stranica do kraja učita. U ovom primjeru, postavili smo neprozirnost na 0 tj. 0%. I za kraj, pretplatili smo se na contentready koji osigurava da će element biti učitan u potpunosti, te biti dostupan za korištenje prije nego što se priloženi kod pokrene. Kod koji smo priložili jednostavno poziva pokretanje animacije objekta koju smo kreirali ranije u kodu.

Slika 7. Prikaz anim_fadeout.js dokumenta

Slika 8. Animacija Fade out u pregledniku

Slika 9. Animacija Fade out u pregledniku

Slika 10. Animacija Fade out u pregledniku

Color

Sljedeća animacija koju ćemo primijeniti je promjena boje jednog elementa. Naš element DIV će promijeniti boju pozadine od plave do zelene.

Ponovno započinjemo s php datotekom, anim_color.php

Slika 11. Prikaz anim_color.php dokumenta

Potrebno je stvoriti div sa određenom bojom pozadine, u ovom slučaju je to plava.

Zatim stvaramo JS datoteku unutar anim_color.js koje ćemo postaviti kod animacije za postavljanje nove boje našeg DIV-a.

Slika 12. Prikaz anim_color.js dokumenta

Stvaramo novi anim element na osnovi našeg div-a. ID diva-a sadrži atribute sa svojstvima. Mi smo postavili novu backgroundColor u zelenu boju. Na kraju, nalazi se animacija koja se pokreće nakon što se div učita kroz contentready događaj. Boja elementa se zatim mijenja of početne plave do zelene koju smo mi postavili u zadano vrijeme od jedne sekunde.

Kada pokrenemo datoteku anim_color.php u pregledniku, ovako izgleda naša animacija:

Slika 13. Animacija Color u pregledniku

Slika 14. Animacija Color u pregledniku

Curved

Jedan od načina za micanje elemenata iz jedne pozicije u drugu pomoću animacija je uz zakrivljenu putanju. Krivulja ovisi u X i Y koordinatama koje će element pratiti.

Potrebno je definirati jednostavan DIV element u datoteci anim_curved.php.

Slika 15. Prikaz anim_curved.php dokumenta

Zatim stvaramo anim_curved.js sa sljedećim sadržajem.

Slika 16. Prikaz anim_curved.js dokumenta

Unutar naše JS datoteke, započinjemo sa stvaranjem novog anim objekta, koji se temelji na našem div elementu koristeći njegov ID. Zatim, pretplaćujemo se na contentready funkciju i dodajemo svoj kod za animaciju. Prvo povraćamo trenutne X i Y coordinate objekta kako bi mogli znati stratnu poziciju za animaciju. Zatim uzimamo SET metodu da bi dodali TO svojstva koja ćemo postaviti kao krivulju. X i Y koordinate ćemo opisati onako kako želimo da se nas objekt kreće. Nakon što je nas DIV učitani kod za animaciju se pokrene, YUI animacija će naš objekt pomaknuti prema X i Y koordinatama koje smo mi postavili.

Slika 17. Animacija Curved u pregledniku

Slika 18. Animacija Curved u pregledniku

Straight

Kao što već znamo element možemo pomjerati i prema ravnoj liniji. U ovom primjeru element ćemo pomjeriti 200 pixela u desno.

Započinjemo stvaranjem anim_straight.php datoteke.

Slika 19. Prikaz anim_straight.php dokumenta

Kao i do sada, kreiramo DIV element koji ćemo micati.

Slika 20. Prikaz anim_straight.js dokumenta

Stvaramo anim_straight.js dokument. Pretplaćujemo se na contentready događaj i dodajemo kod koji će se pokrenuti kada naš div bude u potpunosti učitan u pregledniku. Prvo dohvaćamo trenutne X i Y koordinate div-a kako bi znali gdje će kretnja započeti. Zatim pozivamo SET metodu našeg ANIM objekta koji omogućava nama da postavimo svojstva novih koordinata. Pomaknuti ćemo div u desno za 200 px, stoga smo dodali razmak na njegovu trenutnu X koordinatu i ostaviti Y koordinatu nepromijenjenu, iz razloga što ne želimo micati naš objekt gore ili dolje.

Ovako kretnja našeg diva izgleda u pregledniku:

Slika 21. Animacija Straight u pregledniku

Slika 22. Animacija Straight u pregledniku

Dani su osnovni primjeri za izrade animacija, ukoliko želimo stvoriti zahtjevnije animacije potrebno je proći kroz dodatnu literaturu. Animirati možemo apsolutno svaki segment stranice, bilo na vrhu, dolje na kraju, u samom sadržaju ili izbornicima. Ukoliko posjetite neke od sljedećih poveznica, možete se detaljnije upoznati s načinima izrade i korištenja animacija za Vaše web stranice.

Literatura

http://dynamicsjs.com/

http://www.tutorialspoint.com/javascript/javascript_placement.htm

https://books.google.hr/books?id=pjL3px_H6CQC&pg=PT21&lpg=PT21&dq=how+to+make+animation+in+moodle&source=bl&ots=7v0qcGvdV4&sig=_LCZwwZa9qJE6MgHjgI_4eT7glg&hl=hr&sa=X&ved=0ahUKEwjgmZmmqInOAhVFNxQKHdgqDwEQ6AEIYTAJ#v=onepage&q=animation&f=false